<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: './index' }"
        >HSE录入问题管理</el-breadcrumb-item
      >
      <el-breadcrumb-item>HSE录入问题修改</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="page-content">
      <el-form
        :model="editForm"
        ref="editFormRef"
        :rules="editFormRules"
        label-width="100px"
        label-position="right"
        style="width: 100%"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="组内审核">
              <el-input
                v-model="editForm.internalAuditorName"
                style="width: 50%"
                readonly
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审核时间">
              <el-input
                v-model="editForm.auditTime"
                style="width: 50%"
                readonly
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="受检单位">
              <el-input
                v-model="editForm.companyName"
                style="width: 50%"
                readonly
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="轮次">
              <el-input
                v-model="editForm.round"
                style="width: 50%"
                readonly
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="问题描述" prop="audDescription">
              <el-input
                v-model="editForm.audDescription"
                type="textarea"
                style="width: 78%"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="判定依据" prop="judgmentBasis">
              <el-input
                type="textarea"
                v-model="editForm.judgmentBasis"
                style="width: 78%"
                readonly
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item
              label="QHSEE管理体系要素"
              prop="qhseeManagementFactor"
            >
              <el-input
                v-model="editForm.qhseeManagementFactor"
                style="width: 78%"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="涉及要素" prop="elementsInvolved">
              <el-input
                v-model="editForm.elementsInvolved"
                style="width: 50%"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审核主题">
              <el-input
                v-model="editForm.auditSubject"
                style="width: 50%"
                readonly
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="审核项">
              <el-input
                v-model="editForm.auditItem"
                style="width: 78%"
                readonly
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="审核内容">
              <el-input
                v-model="editForm.auditContent"
                type="textarea"
                style="width: 78%"
                readonly
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="评分项">
              <el-input
                v-model="editForm.scoringItems"
                type="textarea"
                style="width: 78%"
                readonly
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="问题级别" prop="questionLevel">
              <el-select
                placeholder="请选择问题级别"
                v-model="editForm.questionLevel"
                style="width: 50%"
                clearable
              >
                <el-option
                  v-for="item in problemLevel"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原因分析" prop="causeAnalysis">
              <el-select
                placeholder="请选择问题原因"
                v-model="editForm.causeAnalysis"
                style="width: 50%"
                clearable
              >
                <el-option
                  v-for="item in problemCause"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="隐患级别" prop="problemLevel">
              <el-select
                placeholder="请选择隐患级别"
                v-model="editForm.problemLevel"
                style="width: 50%"
                clearable
              >
                <el-option
                  v-for="item in dangerLevel"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审核类别">
              <el-input
                v-model="editForm.classify"
                style="width: 50%"
                readonly
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="整改建议" prop="rectificationSuggestions">
              <el-input
                v-model="editForm.rectificationSuggestions"
                type="textarea"
                style="width: 78%"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="责任人" prop="responsePersonName">
              <el-select
                placeholder="输入姓名搜索"
                v-model="editForm.responsePersonName"
                value-key="employeeID"
                @change="editResponsePerson"
                style="width: 50%"
                filterable
                clearable
              >
                <el-option
                  v-for="item in employees"
                  :key="item.employeeID"
                  :label="item.name + '(' + item.station + ' | ' + item.companyName + ')'"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="整改责任人" prop="rectPersonName">
              <el-select
                placeholder="输入名字搜索"
                v-model="editForm.rectPersonName"
                @change="editRectPerson"
                value-key="employeeID"
                style="width: 50%"
                filterable
                clearable
              >
                <el-option
                  v-for="item in employees"
                  :key="item.employeeID"
                  :label="item.name + '(' + item.station + ' | ' + item.companyName + ')'"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="扣分" prop="lostScore">
              <el-input
                placeholder="请输入分数"
                v-model="editForm.lostScore"
                type="number"
                style="width: 50%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查人">
              <el-input
                v-model="editForm.checkerName"
                style="width: 50%"
                readonly
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="检查图片">
            <el-upload
              :action="`/api/file_upload`"
              :headers="{ Authorization: currentUser.token }"
              list-type="picture-card"
              accept=".png, .jpg, .bmp, .tif, .gif, .jpeg"
              :limit="4"
              :on-success="handleSuccess"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="checkAttachList"
            >
              <i class="el-icon-plus"></i>
              <div slot="tip" class="el-upload__tip">
                最多上传4张图片，每张图片不能超过12MB！
              </div>
            </el-upload>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="问题视频">
            <el-row>
              <el-col :span="8">
                <el-upload
                  v-model="editForm.checkVideo"
                  :action="`/api/file_upload`"
                  :auto-upload="true"
                  :limit="1"
                  :headers="{ Authorization: currentUser.token }"
                  accept=".mp4, .qlv, .qsv, .ogg, .flv, .avi, .wmv, .rmvb"
                  :before-upload="beforeAttachUpload"
                  :on-success="handleSuccessCheckVideo"
                  list-type="text"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" style="padding-right: 20px">
                    只能上传mp4、avi、flash、rmvb、rm格式，且不大于12M的视频。
                  </div>
                </el-upload>
              </el-col>
              <el-col :span="16">
                <el-card
                  :body-style="{ padding: '10px' }"
                  style="width: 400px; height: 200px; text-align: center"
                >
                  <span v-if="!editForm.checkVideo">未上传视频文件！</span>
                  <video
                    v-else-if="editForm.checkVideo"
                    width="100%"
                    height="180"
                    controls
                    preload="none"
                    :src="editForm.checkVideo"
                  ></video>
                  <video
                    v-else
                    width="100%"
                    height="180"
                    controls
                    preload="none"
                    :src="updateCheckVideoUrl"
                  ></video>
                </el-card>
              </el-col>
            </el-row>
          </el-form-item>
        </el-row>
      </el-form>

      <div class="btn">
        <el-button @click="goback()">返 回</el-button>
        <el-button type="primary" @click="handleUpdate()">保 存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { GetDictionary } from "../../../services/dictionary";
import {
  GetHSEAuditGroupMember,
  UploadURL,
  UpdateHSECheckRecord,
} from "../../../services/hseAudit";
import { GetCurrentUser } from "../../../store/CurrentUser";

export default {
  data() {
    return {
      editForm: {},
      editFormRules: {
        audDescription: [
          { required: true, message: "请输入问题描述", trigger: "blur" },
        ],
        judgmentBasis: [],
        qhseeManagementFactor: [],
        elementsInvolved: [],
        questionLevel: [
          { required: true, message: "请选择问题级别", trigger: "change" },
        ],
        causeAnalysis: [
          { required: true, message: "请选择问题原因", trigger: "change" },
        ],
        problemLevel: [
          { required: true, message: "请选择隐患级别", trigger: "change" },
        ],
        rectificationSuggestions: [
          { required: true, message: "请输入整改建议", trigger: "blur" },
        ],
        responsePersonName: [
          { required: true, message: "请选择责任人", trigger: "change" },
        ],
        rectPersonName: [
          { required: true, message: "请选择整改责任人", trigger: "change" },
        ],
        lostScore: [{ required: true, message: "请输入分数", trigger: "blur" }],
      },
      employees: [],
      dangerLevel: [],
      problemCause: [],
      problemLevel: [],
      checkAttachList: [],
    };
  },
  mounted() {
    this.getRowData();
  },
  computed: {
    currentUser() {
      return GetCurrentUser();
    },
  },
  methods: {
    getRowData() {
      this.checkAttachList = []
      this.editForm = JSON.parse(this.$route.query.row);
      this.getCheckAttach(this.editForm.checkAttach1);
      this.getCheckAttach(this.editForm.checkAttach2);
      this.getCheckAttach(this.editForm.checkAttach3);
      this.getCheckAttach(this.editForm.checkAttach4);
      GetHSEAuditGroupMember()
        .then((res) => {
          this.employees = res.data;
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
      GetDictionary({ name: "QHSEE隐患级别" })
        .then((res) => {
          this.dangerLevel = res.data;
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
      GetDictionary({ name: "QHSEE原因分析" })
        .then((res) => {
          this.problemCause = res.data;
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
      GetDictionary({ name: "QHSEE问题级别" })
        .then((res) => {
          this.problemLevel = res.data;
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
    },
    getCheckAttach(checkAttach) {
      if (checkAttach != " " && checkAttach != undefined) {
        this.checkAttachList.push({ url: checkAttach });
      }
    },
    editResponsePerson(val) {
      this.editForm.responsePersonName = val.name;
      this.editForm.responsePersonID = val.employeeID;
    },
    editRectPerson(val) {
      this.editForm.rectPersonName = val.name;
      this.editForm.rectPersonID = val.employeeID;
    },
    handlePreview(file) {
      let size = file.size / 1024 / 1024 / 12;
      if (size > 1) {
        this.$message.error("上传文件大小不能超过12MB！");
      }
    },
    handleRemove(file, fileList) {
      this.checkAttachList = fileList;
      console.log(file);
      console.log(fileList);
    },
    handleSuccess(response) {
      if (response) {
        this.$notify.success({
          body: {
            style: { width: "300px", height: "500px" },
          },
          title: "提示",
          message: "文件上传成功",
        });
        this.checkAttachList.push({ url: UploadURL + response.data });
      }
    },
    beforeAttachUpload(file) {
      let size = file.size / 1024 / 1024 / 12;
      if (size > 1) {
        this.$message.error("上传文件大小不能超过12MB！");
      }
    },
    handleSuccessCheckVideo(response) {
      if (response) {
        this.$notify.success({
          body: {
            style: { width: "300px", height: "500px" },
          },
          title: "提示",
          message: "问题视频上传成功",
        });
        this.editForm.checkVideo = UploadURL + response.data;
      }
    },
    handleUpdate() {
      if (this.checkAttachList.length != 0) {
        for (var i in this.checkAttachList) {
          if (i == 0) {
            this.editForm.checkAttach1 = this.checkAttachList[0].url;
            this.editForm.checkAttach2 = " ";
            this.editForm.checkAttach3 = " ";
            this.editForm.checkAttach4 = " ";
          } else if (i == 1) {
            this.editForm.checkAttach2 = this.checkAttachList[1].url;
            this.editForm.checkAttach3 = " ";
            this.editForm.checkAttach4 = " ";
          } else if (i == 2) {
            this.editForm.checkAttach3 = this.checkAttachList[2].url;
            this.editForm.checkAttach4 = " ";
          } else {
            this.editForm.checkAttach4 = this.checkAttachList[3].url;
          }
        } 
        this.submit();
      } else {
        this.editForm.checkAttach1 = " ";
        this.editForm.checkAttach2 = " ";
        this.editForm.checkAttach3 = " ";
        this.editForm.checkAttach4 = " ";
        this.submit();
      }
    },
    submit() {
      this.$refs.editFormRef.validate((valid) => {
        if (valid) {
          console.log(this.editForm);
          UpdateHSECheckRecord(this.editForm)
            .then(() => {
              this.$message.success("修改成功！");
              this.goback()
            })
            .catch((err) => {
              this.$message.error(err);
            });
        }
      });
    },
    goback() {
      this.$router.push({ path: "./index" });
    },
  },
};
</script>

<style>
.btn {
  margin: 5px 40% 5px 40%;
}
</style>